<template>
	<view class="buyer-box">
		<view class="nav">
			<scroll-view class="tab-scroll" scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
				<view class="tab-scroll_box">
					<view class="tab-scroll_item" v-for=" (item,index) in category" :key="index" :class="{'active':isActive==item.id}" @click="chenked(item,index)">
						<text class="text">{{item.tagName}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- <sk-container v-if="!imgList.length" :safeAreaTop="false" :window-top="'130rpx'" :background="'#f3ecef'">
			<view style="padding: 0 30rpx 30rpx 30rpx;">
				<sk-waterfall :background="'#f3ecef'"></sk-waterfall>
			</view>
		</sk-container> -->
		<!--瀑布流-->
		<scroll-view :style="{height:scrollH+'rpx'}" scroll-y="true" class="scroll-Y" @scrolltolower="loadMoreImages">
			<waterfallsFlow :single="true" v-if="imgList.length && false" :list="imgList" :imageSrcKey="'fristPageUrl'" @wapper-lick="goUrl">
				<!--  #ifdef  MP-WEIXIN -->
				<view v-for="(item, index) of imgList" :key="index" slot="slot{{index}}">
					<view class="goodsPrice">
						<!-- <image src="../../static/user.png" class="u-img"></image> -->
						<view class="g-right">
							{{item.title || ''}}
							<!-- <view class="cc">
								{{item.text}}
							</view> -->
						</view>
					</view>
				</view>
				<!--  #endif -->
			
				<!-- #ifndef  MP-WEIXIN -->
				<template v-slot:default="item">
					<view class="goodsPrice">
						<view class="g-right">
							{{item.title || ''}}
						</view>
					</view>
				</template>
				<!--  #endif -->
			</waterfallsFlow>
			<zero-waterfall v-if="imgList.length" :list="imgList" :imageSrcKey="'fristPageUrl'" @wapper-lick="goUrl">
			    <!--  #ifdef  MP-WEIXIN -->
			    <view v-for="(item, index) of imgList" :key="index" slot="slot{{item.id}}">
			       <view class="goodsPrice">
			       	<view class="g-right">
			       		{{item.title ||''}}
			       	</view>
			       </view>
			    </view>
			    <!--  #endif -->
			
			    <!-- #ifndef  MP-WEIXIN -->
			    <template v-slot:default="item">
			        <view class="goodsPrice">
			        	<view class="g-right">
			        		{{item.title ||''}}
			        	</view>
			        </view>
			    </template>
			    <!-- #endif -->
			</zero-waterfall>
			<empty @reload="getList" v-if="!imgList.length && show"/>
		</scroll-view>
	</view>
</template>

<script>
	import waterfallsFlow from "@/components/waterfalls-flow/index.vue";
	import empty from "@/components/empty.vue";
	// import Footer from '@/components/footer.vue'
	import {getMySubjectElements,getQuerylist} from "@/api/user.js"
	export default {
		components: { waterfallsFlow, empty },
		data() {
			return {
				isActive: 0,
				contentScrollW: 0, // 导航区宽度
				scrollLeft: 0, // 横向滚动条位置
				fullHeight:"",
				category:[],
				imgList: [],
				show: false
			};
		},
		onLoad() {
			// this.getList()
			this.tag()
		},
		computed:{
			scrollH:function(){
				let sys = uni.getSystemInfoSync();
				let winWidth = sys.windowWidth;
				let winrate = 750/winWidth;
				let winHeight = parseInt(sys.windowHeight*winrate) - 136
				return winHeight	
			},
		},
		mounted() {
			
		},
		methods:{
			getScrollW() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.tab-scroll').boundingClientRect(data => {
					  // 拿到 scroll-view 组件宽度
					  this.contentScrollW = data.width
				 }).exec();
				 query.selectAll('.tab-scroll_item').boundingClientRect(data => {
					 let dataLen = data.length;
					  for (let i = 0; i < dataLen; i++) {
						  //  scroll-view 子元素组件距离左边栏的距离
						  this.category[i].left = data[i].left;
						 //  scroll-view 子元素组件宽度
						 this.category[i].width = data[i].width
					}
				 }).exec()
			},
			// 当前点击子元素靠左留一个选项展示，子元素宽度不相同也可实现
			chenked(item,index) {
				if(this.isActive == item.id) return
				this.imgList = []
				this.isActive = item.id;
				this.scrollLeft = 0;
				for (let i = 0; i <= index - 1; i++) {
					this.scrollLeft += this.category[i].width
				}
				this.getList()
			},
			// 瀑布流
			// 加载更多图片
			loadMoreImages: function() {
				console.log('加载更多图片', this.type)
				return
				if (!this.last) {
					wx.showLoading({
						title: "加载中...",
					});
					this.getGoodthingList();
				}
				wx.hideLoading();
			},
			goUrl(item){
				uni.removeStorage({
					key: 'selectedImgsData'
				})
				uni.removeStorage({
					key: 'selectedImgsList'
				})
				uni.removeStorage({
					key: 'diyUrlList'
				})
				uni.removeStorage({
					key: 'orderElementPicLen'
				})
				uni.navigateTo({
					url: "/pagesA/gallery/galleryDetail?id="+item.id + '&type=1'
				})
			},
			tag(){
				// 获取标签
				getQuerylist().then((res) => {
					this.category = res
					this.category.unshift({
						tagName: '全部',
						id: ''
					})
					this.isActive = res[0].id
					this.$nextTick(() => {
						this.getScrollW()
					})
					this.getList()
				})
			},
			getList() {
				getMySubjectElements({tagId:this.isActive}).then((res) => {
					this.imgList = res
					this.show = true
				})
			}
		}
	}
</script>

<style lang="less" scoped>
.buyer-box{
	// padding-top: 44rpx;
	.t-img{
		height: 400rpx;
		width: 100%;
	}
	.nav{
		width: 100%;
		align-items: center;
		height: 90rpx;
		padding-top: 26rpx;
		background-color: #f3ecef;
		.tab-scroll{
			flex: 1;
			overflow: hidden;
			box-sizing: border-box;
			padding-left: 30rpx;
			padding-right: 30rpx;
			.tab-scroll_box{
				display: flex;
				align-items: center;
				flex-wrap: nowrap;
				box-sizing: border-box;
				.tab-scroll_item{
					margin-right: 17rpx;
					flex-shrink: 0;
					padding: 0 24rpx;
					height: 56rpx;
					line-height: 56rpx;
					display: flex;
					justify-content: center;
					font-size: 24rpx;
					border-radius: 32rpx;
					font-family: PingFangSC-Regular;
					color: #666666;
				}
				.active{
					border-radius: 32px;
					background: #E4919D;
					color: #fff;
				}
			}
		}
	}
	
	.scroll-Y{
		// margin-top: 130rpx;
		// background-color: #333;
	}
	.b-img{
		width:320rpx;
	}
	
	.goodsPrice{
		color: #3D3D3D;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		margin-top: 12rpx;
		margin-bottom: 10rpx;
		.u-img{
			width: 66rpx;
			height: 66rpx;
			border-radius: 50%;
			margin-right: 16rpx;
		}
		.cc{
			color: #979797;
		}
	}
}
</style>
